<template>
	<el-container>
		<el-header>
			<el-row>
				<el-col :span="1">
					<span><i class="el-icon-s-help" style="text-align: right; font-size: 30px; color: #42acff; padding-top: 13px;"></i></span>
				</el-col>
				<el-col :span="2">
					<span>综合定位平台</span>
				</el-col>
				<el-col :span="17">
					<el-menu :default-active="activeIndex" active-text-color="#00acff" class="el-menu-demo" mode="horizontal" @select="handleSelect">
						<el-menu-item index="1">地图监控</el-menu-item>
						<el-menu-item index="2">实体管理</el-menu-item>
						<el-menu-item index="3">围栏管理</el-menu-item>
					</el-menu>
				</el-col>

				<el-col :span="4" style="text-align: right; font-size: 12px">
					<el-dropdown>
						<i class="el-icon-user-solid" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item><i class="el-icon-guide" style="margin-right: 15px"></i>退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span>Admin</span>
				</el-col>
			</el-row>
		</el-header>
		<el-main>

			<el-form :inline="true" :model="formInline" class="demo-form-inline" style="height: 40px;padding: 10px;text-align: left;">
				<el-form-item>
					<el-input size="small" v-model="formInline.name" placeholder="名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="onSubmit">查询</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="tableData" stripe border style="width: 100%;">
				<el-table-column prop="name" label="名称" width="180">
				</el-table-column>
				<el-table-column prop="state" label="状态" width="100"
				:filters="[{ text: '有效', value: '有效' }, { text: '无效', value: '无效' }]"
				:filter-method="filterState" filter-placement="bottom-end">
					<template slot-scope="scope">
						<el-tag :type="scope.row.state === '有效' ? 'primary' : 'success'" disable-transitions>{{scope.row.state}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="wllx" label="围栏类型" width="180"
				:filters="[{ text: '全局围栏', value: '全局围栏' }, { text: '自定义围栏', value: '自定义围栏' }]"
				:filter-method="filterWllx" filter-placement="bottom-end">
					<template slot-scope="scope">
						<el-tag :type="scope.row.wllx === '全局围栏' ? 'primary' : 'success'" disable-transitions>{{scope.row.wllx}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="gzlx" label="规则类型" width="180"
				:filters="[{ text: '禁入区', value: '禁入区' }, { text: '禁出区', value: '禁出区' }]"
				:filter-method="filterGzlx" filter-placement="bottom-end">
					<template slot-scope="scope">
						<el-tag :type="scope.row.gzlx === '全局围栏' ? 'primary' : 'success'" disable-transitions>{{scope.row.gzlx}}</el-tag>
					</template>
				</el-table-column>
	
				<el-table-column prop="gzstart" sortable label="规则生效时间" width="180">
				</el-table-column>
				<el-table-column prop="gzend" sortable label="规则失效时间" width="180">
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: '3',
				formInline: {
					name: '',
				},
				tableData: [{
					name: '121233',
					state: '有效',
					wllx: '全局围栏',
					gzlx: '禁入区',
					gzstart: '2020-01-09',
					gzend: '2021-01-09',
				}, {
					name: 'gaeee',
					state: '无效',
					wllx: '自定义围栏',
					gzlx: '禁出区',
					gzstart: '2020-01-08',
					gzend: '2021-01-01',
				}, {
					name: '1232f',
					state: '无效',
					wllx: '全局围栏',
					gzlx: '禁入区',
					gzstart: '2020-01-02',
					gzend: '2021-01-03',
				}, {
					name: 'ndsadfe',
					state: '有效',
					wllx: '自定义围栏',
					gzlx: '禁出区',
					gzstart: '2020-02-09',
					gzend: '2021-03-09',
				} ]
			};
		},
		created() {
			console.log('3created');
		},
		beforeMount : function(){
			console.log('3beforeMount');
		
		},
		updated : function(){
			console.log('3updated');
				
		},
		mounted() {
			console.log('3mounted!----');
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			filterState(value, row) {
				return row.state === value;
			},
			filterWllx(value, row) {
				return row.wllx === value;
			},
			filterGzlx(value, row) {
				return row.gzlx === value;
			},
			handleDetail(index, row) {
				console.log(index, row);
			},
			handleReset(index, row) {
				console.log(index, row);
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath + "=keyPath");
				if (key == '1') {
					this.$router.push({
						path: '/monitor'
					});
				} else if (key == "2") {
					this.$router.push({
						path: '/entity'
					});
				} else if (key == "3") {
					// this.$router.push({
					// 	path: '/fence'
					// });
				} else if (key == '4') {
					this.$router.push({
						path: '/config'
					});
				}
			}
		}
	}
</script>

<style>
	.el-header {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		line-height: 30px;
	}

	.el-main {
		text-align: center;
	}

	.el-table__header tr,
	.el-table__header th {
		text-align: center;
		padding: 0;
		height: 40px;
		line-height: 30px;
	}

	.el-table__body tr,
	.el-table__body td {
		text-align: center;
		padding: 0;
		height: 40px;
		line-height: 30px;
	}
</style>
